<template>
    <div>
        <a-modal
            :title="view?'查看培训场次':(formState.id?'编辑培训场次':'添加培训场次')"
            :visible="visible"
            @ok="handleOk()"
            @cancel="visible = false"
            :width="800"
            :forceRender="true"
        >
            <template slot="footer">
                <div>
                    <a-button v-if="!view" key="back" @click="visible = false">取消</a-button>
                    <a-button v-if="!view" class="blue-btn" key="submit" type="primary" @click="handleOk()"> 确定</a-button>
                </div>
            </template>
            <div>
                <a-form-model
                    :key="ruleFormKey"
                    :id="randomId"
                    class="trainingSessions-form0-model-big-box"
                    ref="ruleForm2"
                    :model="formState"
                    :rules="rules"
                    layout="inline"
                >
                    <a-descriptions bordered style="width: 100%;">
                        <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                签到场次
                            </span>
                            <a-form-model-item ref="fqdccbt" prop="fqdccbt">
                                <a-radio-group v-model="formState.fqdccbt" style="line-height: 40px;" v-if="!view">
                                    <a-radio value="上午">上午</a-radio>
                                    <a-radio value="下午">下午</a-radio>
                                </a-radio-group>
                                <span v-else >{{ formState.fqdccbt }}</span>
                                <!-- <a-input
                                    v-model="formState.fqdccbt"
                                    placeholder="请输入签到场次"
                                /> -->
                            </a-form-model-item>
                        </a-descriptions-item>
                        <!-- <a-descriptions-item >
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" style="color: #fff;">*</span>
                                签到时间
                            </span>
                            <a-form-model-item ref="fqdsj" prop="fqdsj">
                                <a-date-picker show-time placeholder="请选择签到时间" v-model="formState.fqdsj" />
                            </a-form-model-item>
                        </a-descriptions-item> -->
                        <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                签到状态
                            </span>
                            <a-form-model-item >
                                <a-radio-group v-model="formState.fqdzt" style="line-height: 40px;" v-if="!view">
                                    <a-radio value="启用">启用</a-radio>
                                    <a-radio value="不启用">不启用</a-radio>
                                </a-radio-group>
                                <span v-else >{{ formState.fqdzt }}</span>
                            </a-form-model-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="4">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                培训主题
                            </span>
                            <a-form-model-item ref="fcczt" prop="fcczt" class="zm-form-model">
                                <div style="width: 100%;" >
                                    <a-textarea 
                                        style="width: 100%;"
                                        v-if="!view"
                                        v-model="formState.fcczt"
                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                        placeholder="请输入培训主题"
                                    ></a-textarea>
                                    <div v-else v-html="formState.fcczt" ></div>
                                </div>
                            </a-form-model-item>
                        </a-descriptions-item>
                        <!-- <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                培训老师
                            </span>
                            <a-form-model-item ref="fccpxls" prop="fccpxls">
                                <a-input
                                    v-model="formState.fccpxls"
                                    placeholder="请输入培训老师"
                                />
                            </a-form-model-item>
                        </a-descriptions-item> -->
                        <a-descriptions-item :span="3">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                培训时间
                            </span>
                            <a-form-model-item ref="fccpxsj" prop="fccpxsj">
                                <a-date-picker placeholder="请输入培训时间" v-model="formState.fccpxsj" v-if="!view"/>
                                <span v-else>{{ moment(formState.fccpxsj).format('YYYY-MM-DD') }}</span>
                            </a-form-model-item>
                        </a-descriptions-item>
                        
                    </a-descriptions>
                </a-form-model>
                <div>
                    <commpVxeTable
                        :key="trainingTeacherTableEye"
                        ref="trainingTeacherVxeTableEye"
                        :config="trainingTeacherDataEye" 
                        :columns="trainingTeacherColumns" 
                        :formItem="[]"
                        :conditionBtnRow="true"
                        :isCanWrap="true"
                    >
                        <template v-slot:externalOperations="{data}">
                            <vxe-form-item>
                                <template>
                                    <a-button v-if="!view" class="blue-btn" type="primary" icon="plus" @click="addTrainingTeacherClick()">添加培训老师</a-button>
                                </template>
                            </vxe-form-item>
                        </template>
                        <template v-slot:fjsxm_header="{row}">
                            <span style="padding-right: 21;" v-if="row.fjsxm && row.fjsxm.length == 2">
                                <span v-for="(trem,tI) in row.fjsxm.split('')" :key="tI" >
                                    {{trem}}
                                    <span v-if="tI+1 !== row.fjsxm.split('').length">&nbsp;&nbsp;</span>
                                </span>
                            </span>
                            <span style="padding-right: 21;" v-else>{{ row.fjsxm }}</span>
                        </template>
                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" v-if="!view">
                                <a-form-item >
                                    <a-button class="blue-btn" type="primary" icon="edit" @click="editTrainingTeacher(row)">编辑</a-button>
                                </a-form-item>
                                <a-form-item >
                                    <a-button class="red-btn" type="primary" icon="delete" @click="deleteTrainingTeacher(row)">删除</a-button>
                                </a-form-item>
                            </a-form> 
                        </template>
                    </commpVxeTable>
                </div>
                <div v-if="formState.id">
                    <commpVxeTable
                        :key="refreshTableEye"
                        ref="headmanVxeTableEye"
                        :config="configDataEye" 
                        :columns="columnsVxeEye" 
                        :formItem="[]"
                        :conditionBtnRow="true"
                        :isCanWrap="true"
                    >
                        <template v-slot:fqdsj_default="{row}">
                            <div style="width: 100%;min-height: 22px;" >{{ row.fqdsj }}</div>
                            <div v-if="!view" style="margin-bottom: 5px;">
                                <a-button class="blue-btn" type="primary" icon="edit" @click="fqdsjClick(row)">设置签到时间</a-button>
                            </div>
                        </template>
                        <template v-slot:fbz_default="{row}">
                            <div style="width: 100%;min-height: 22px;" >{{ row.fbz }}</div>
                            <div v-if="!view" style="margin-bottom: 5px;">
                                <a-button class="blue-btn" type="primary" icon="edit" @click="fbzClick(row)">修改备注</a-button>
                            </div>
                        </template>
                    </commpVxeTable>
                </div>
            </div>
            <bzReason ref="bzReasonRef" @editBZ="editBZ"/>
            <addTrainingTeacher ref="addTrainingTeacherRef" @refreshTrainingTeacher="refreshTrainingTeacher" />
        </a-modal>
    </div>
</template>
<script>
import {
    jcylxjhaddLxpxqdcs,
    jcylxjhupdateLxpxqdcs,
    jcylxjhqueryLxqdccQdjlList,
    jcylxjhszqdjlbz,
    jcylxjhdeletePxls,
} from './service/index'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import bzReason from './bzReason.vue'
import moment from 'moment'
import addTrainingTeacher from './addTrainingTeacher.vue'
import { Footer } from 'vxe-table'
export default {
    components:{
        commpVxeTable,
        bzReason,
        addTrainingTeacher,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            ruleFormKey:null,
            randomId:'randomId'+new Date().getTime(),
            formState:{},
            rules: {
                fqdccbt: [{ required: true, message: '请选择签到场次', trigger: 'change' }],
                fcczt:[{ required: true, message: '请输入培训主题', trigger: 'change' }],
                fccpxls:[{ required: true, message: '请输入培训老师', trigger: 'change' }],
                fqdsj: [{type:'object', required: true, message: '请选择签到时间', trigger: 'change' }],
                fccpxsj: [{type:'object', required: true, message: '请选择培训时间', trigger: 'change' }],
                
            },
            view:false,
            refreshTableEye:null,
            configDataEye:{
                api:assessCheckApi.jcylxjhqueryLxqdccQdjlList,
                rowId: 'id',
                height:200,
                paramet:{
                }
            },
            columnsVxeEye:[{
                title: '姓名', //列头显示文字
                field: 'realname',
                titleInterval:true,
                slots: {
                    header:'realname_header',
                },
            },{
                title: '工作单位', //列头显示文字
                field: 'fgzdw',
            },{
                title: '签到时间', //列头显示文字
                field: 'fqdsj',
                slots: {
                    default:'fqdsj_default',
                },
                editRender:"{}"
            },{
                title: '备注', //列头显示文字
                field: 'fbz',
                titleInterval:true,
                slots: {
                    header:'fbz_header',
                    default:'fbz_default',
                },
                editRender:"{}"
            }],
            trainingTeacherTableEye:null,
            trainingTeacherDataEye:{
                api:assessCheckApi.jcylxjhqueryPxlsList,
                rowId: 'id',
                height:200,
                paramet:{
                }
            },
            trainingTeacherColumns:[{
                title: '老师姓名', //列头显示文字
                field: 'fjsxm',
                slots: {
                    default:'fjsxm_header',
                },
            },{
                title: '老师培训内容', //列头显示文字
                field: 'fjspxnr',
            },{
                title: '操作',
                field: 'id',
                titleInterval:true,
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                    header:'operation_header',
                },
                width:175,
            }]
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,view){
            //console.log(row)
            this.view = view
            // row.fqdsj = row.fqdsj?moment(row.fqdsj):''
            row = {
                ...row,
                fccpxsj:row.fccpxsj?moment(row.fccpxsj):'',
            }
            this.formState = row
            if(row.id){
                this.configDataEye.paramet = {
                    flxqdccid:row.id
                }
                this.trainingTeacherDataEye.paramet = {
                    flxqdccid:row.id
                }
                
            }else{
                this.configDataEye.paramet = {}
                this.trainingTeacherDataEye.paramet = {}
            }
            this.refreshTableEye = Date.now()
            this.trainingTeacherTableEye = Date.now()
            this.ruleFormKey = Date.now()
        },
        fbzClick(row){
            if(this.view){
                return false
            }
            this.$refs.bzReasonRef.getData({flxqdccid:this.formState.id,id:row.id,fbz:row.fbz})
            this.$refs.bzReasonRef.visible = true
        },
        fqdsjClick(row){
            if(this.view){
                return false
            }
            this.$refs.bzReasonRef.getData({flxqdccid:this.formState.id,id:row.id,fbz:row.fbz,isSj:true,fqdsj:row.fqdsj})
            this.$refs.bzReasonRef.visible = true
        },
        refreshTableChange(){
            this.refreshTableEye = Date.now()
        },
        editBZ(row){
            let data = {}
            if(row.isSj){
                data = {
                    flxqdccid:row.flxqdccid,
                    id:row.id,
                    fqdsj:row.fqdsj
                }
            }else{
                data = {
                    flxqdccid:row.flxqdccid,
                    id:row.id,
                    fbz:row.fbz,
                }
            }
            jcylxjhszqdjlbz(data).then(res=>{
                if(res.code == 200){
                    this.$refs.bzReasonRef.visible = false
                    this.$message.success(res.message)
                    this.refreshTableChange()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        //教师
        addTrainingTeacherClick(){
            this.handleOk('添加老师',{})
        },
        editTrainingTeacher(row){
            this.handleOk('编辑老师',row)
        },
        deleteTrainingTeacher(row){
            var that = this
            this.$confirm({
                title:'您确认删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    jcylxjhdeletePxls({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.refreshTrainingTeacher()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        refreshTrainingTeacher(){
            this.trainingTeacherTableEye = Date.now()
            this.$emit('refreshTable32Change')
        },
        handleOk(val,row){
            //console.log('我点击的是这里')
            this.$refs.ruleForm2.validate(valid => {
                if (valid) {
                    let data = {
                        ...this.formState,
                        fccpxsj:moment(this.formState.fccpxsj).format('YYYY-MM-DD')
                        // fqdsj:moment(this.formState.fqdsj).format('YYYY-MM-DD HH:mm:ss'),
                    }
                    if(this.formState.id){
                        jcylxjhupdateLxpxqdcs(data).then(res=>{
                            if(res.code == 200){
                                if(val){
                                    this.$refs.addTrainingTeacherRef.getData({...row,flxqdccid:this.formState.id})
                                    this.$refs.addTrainingTeacherRef.visible = true
                                    
                                }else{
                                    this.visible = false
                                    this.$message.success(res.message)
                                }
                                this.$emit('refreshTable32Change')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        jcylxjhaddLxpxqdcs(data).then(res=>{
                            if(res.code == 200){
                                if(val){
                                    this.$refs.addTrainingTeacherRef.getData({...row,flxqdccid:res.result.id})
                                    this.$refs.addTrainingTeacherRef.visible = true
                                    this.trainingTeacherDataEye.paramet = { flxqdccid:res.result.id  }
                                    this.trainingTeacherTableEye = Date.now()
                                    this.getData({...res.result,flxjhid:this.formState.flxjhid})
                                }else{
                                    this.visible = false
                                    this.$message.success(res.message)
                                }
                                this.$emit('refreshTable32Change')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            })
        },
    }
}
</script>
<style lang="less">
    .trainingSessions-form0-model-big-box{
        padding: 0 15px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 95px !important;//确保左侧固定文字不会换行
            justify-content: flex-end;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{
            
        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }
        
    }
</style>